<template>
  <div class="legend-bar" style="">
    <div class="row-label" style="">图例</div>
    <!-- <div class="sep"></div> -->
    <div class="colorbar">
      <canvas class="flip-x-when-rtl" width="1" height="1" aria-labelledby="colorbar-tt"></canvas>
      <span id="colorbar-cursor" tabindex="0" aria-labelledby="colorbar-tt"></span>
      <span id="colorbar-tt" role="tooltip"></span>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {};
  },
  computed: {},
  mounted() {},
  beforeMount() {
    window.addEventListener('resize', this.$_resizeHandler);
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.$_resizeHandler);
  },
  methods: {
    $_isMobile() {
      const rect = window.document.body.getBoundingClientRect();
      return rect.width < 768;
    },
    $_resizeHandler() {
      if (!document.hidden) {
        const isMobile = this.$_isMobile();
        window.isMobile = isMobile;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.legend-bar {
  position: absolute;
  bottom: 10px;
  right: 1em;
  height: 2em;
  width: 28em;
  padding: 5px 8px;

  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: hsla(0, 10%, 1%, 0.6);

  .row-label {
    padding-right: 5px;
    font-size: 12px;
    line-height: 1em;
  }

  .colorbar {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    // width: calc(100% - 3em);
    height: 70%;
    flex-basis: 100%;

    canvas {
      width: 100%;
      height: 100%;
    }

    #colorbar-cursor {
      position: absolute;
      width: 1px;
      height: 0.9rem;
      padding: 1px 2px;
    }
  }
}

@media screen and (max-width: 479px) {
  .legend-bar {
    right: 8px;
    bottom: 10px;
    width: 24px;
    height: 22em;
    padding: 8px 7px;

    .colorbar {
      width: 100%;
      height: 100%;
      
      #colorbar-cursor {
        width: 10px;
        height: 1px;
        padding: 2px 1px;
      }
    }

    .row-label {
      display: none;
    }
  }
}
</style>
